<template>
   <div class="app-container" ref="main">

      <el-container>
         <el-header>
            <section class="search_box clearfix"
                     :class="{'searchStatus': this.$store.state.app.sidebar.searchStatus}">
               <el-row>
                  <el-col :md="24" :lg="24" :xl="24" class="text_right">
                     <el-button type="primary" @click="routerBack" size="mini"
                                icon="el-icon-back" plain>返回
                     </el-button>
                     <el-button @click="openDialog('create')" icon="el-icon-edit" type="primary" size="mini">添加
                     </el-button>
                  </el-col>
               </el-row>
            </section>
         </el-header>
         <el-main>
            <el-table :data="list" border fit highlight-current-row
                      :max-height="listHeight">

               <el-table-column align="center" label="序号" type="index" width="70">
               </el-table-column>

               <el-table-column align="center" label="户型名称" prop="houseTypeName" min-width="100">
                  <template slot-scope="scope">
                     <el-button type="text" @click="openDialog('update',scope.row)" size="mini">
                        {{scope.row.houseTypeName}}
                     </el-button>
                  </template>
               </el-table-column>

               <el-table-column align="center" label="户型简称" prop="houseTypeShortName" min-width="80">
               </el-table-column>

               <el-table-column align="center" label="户型面积" prop="houseTypeArea" min-width="80">
               </el-table-column>

               <el-table-column align="center" label="价格/每套" prop="perSetPrice" min-width="80">
               </el-table-column>

               <el-table-column align="center" label="操作">
               <template slot-scope="scope">
               <el-button type='danger' size="mini" @click="del(scope.row.keyId)">删除
               </el-button>
               </template>
               </el-table-column>

            </el-table>
         </el-main>
      </el-container>

      <!--添加弹出框-->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
         <el-form :model="temp" :rules="tempRules" ref="temp" label-width="130px"
                  v-loading="dialogFormVisibleLoading">
            <el-row class="form_box">
               <el-col :span="12">
                  <el-form-item label="户型名称">
                     <el-input type="text" placeholder="请输入"
                               v-model="temp.houseTypeName" size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item label="户型简称">
                     <el-input type="text" placeholder="请输入"
                               v-model="temp.houseTypeShortName" size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item label="户型面积">
                     <el-input type="number" placeholder="请输入"
                               v-model="temp.houseTypeArea" size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item label="价格/每套">
                     <el-input type="number" placeholder="请输入"
                               v-model="temp.perSetPrice" size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item label="标签">
                     <el-input type="text" placeholder="请输入"
                               v-model="temp.housesTypeLabel" size="mini"></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item label="是否主力户型" prop="major">
                     <el-switch v-model="temp.major"></el-switch>
                  </el-form-item>
               </el-col>

               <el-col :span="24">
                  <el-form-item label="图片">
                     <el-upload action="https://upload.qiniup.com" class="avatar-uploader"
                                :on-success="handleSuccess_small"
                                :show-file-list="false" :before-upload="beforeUpload"
                                :data="uploadData" accept="image/*">
                        <img v-if="housesTypePicture" :src="housesTypePicture" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                  </el-form-item>
               </el-col>

            </el-row>
         </el-form>

         <div slot="footer">
            <el-button v-if="dialogStatus==='create'" type="primary" @click="create(temp)"
                       size="mini" :loading="tempLoading">提 交
            </el-button>
            <el-button v-else type="primary" @click="update(temp)" size="mini" :loading="tempLoading">提 交
            </el-button>
         </div>
      </el-dialog>

   </div>
</template>

<script>
   import houseTypeApi from "api/houseType";
   import sassApi from "api/saasService";
   import common from "utils/common";

   export default {
      data() {
         return {
            listHeight: 0,  //动态列表高度
            list: null,       //列表
            tempLoading: false, //提交加载动画

            //搜索
            listQuery: {
               housesId: this.$route.query.keyId,
               cityId: sessionStorage.getItem('ledaoCityId')
            },


            //添加/修改
            dialogFormVisible: false,
            textMap: {
               update: "编辑",
               create: "创建"
            },
            dialogStatus: null, //添加/修改状态
            dialogFormVisibleLoading: false, //弹出框加载动画
            temp: {
               housesId: this.$route.query.keyId,
               major: false,
               housesTypeLabel: "",
               perSetPrice: "",
               houseTypeArea: "",
               houseTypeShortName: "",
               houseTypeName: "",
               housesTypePicture: "",
               cityId: sessionStorage.getItem('ledaoCityId')
            },
            tempRules: {
               // 验证规则
               // name: [{required: true, message: "请填写互助计划名称", trigger: "blur"}],
            },
            housesTypePicture: "",
            uploadData: {
               key: "",
               token: ""
            },
         };
      },

      methods: {
         del(keyId) {
            this.$confirm("您确定删除当前数据吗？", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }).then(() => {
               houseTypeApi.delete(keyId).then(res => {
                  if (res.code === 1) {
                     this.$notify({
                        title: "成功",
                        message: "删除成功",
                        type: "success",
                        customClass: "success",
                        duration: 1500
                     });
                     this.getList();
                  } else {
                     this.$notify.error({
                        title: "错误",
                        message: res.msg,
                        customClass: "error",
                        duration: 1500
                     });
                  }
               });
            });
         },

         handleSuccess_small(res, file) {
            this.housesTypePicture = "https://testqn.weilong1993.com/" + res.key;
         },
         beforeUpload(file) {
            let self = this;
            let parts = file.name.split(".");//split() 方法用于把一个字符串分割成字符串数组。
            let fileType = parts[parts.length - 1];
            return sassApi.getUploadToken().then(function (res) {
               self.uploadData.token = res.data;
               self.uploadData.key = common.getNowStr() + "." + fileType;
            });
         },


         //提交数据清空
         resetTemp() {
            this.temp.housesTypePicture = "";
            this.temp.houseTypeName = "";
            this.temp.houseTypeShortName = "";
            this.temp.houseTypeArea = "";
            this.temp.perSetPrice = "";
            this.temp.housesTypeLabel = "";
            this.temp.major = false;
            this.housesTypePicture = "";

            this.$nextTick(() => {
               this.$refs["temp"].clearValidate();   //对表单验证进行重置。
            });
         },

         //打开弹窗
         openDialog(dialogStatus, row) {
            this.dialogStatus = dialogStatus;
            this.dialogFormVisible = true;
            this.resetTemp();
            if (dialogStatus === "update") {
               this.temp = Object.assign({}, row);
               this.housesTypePicture = this.temp.housesTypePicture;
            }
         },


         //添加
         create() {
            this.temp.housesTypePicture = this.housesTypePicture;
            if (!this.temp.housesTypePicture) {
               this.$notify.warning({
                  title: "提示",
                  message: "请上传图片",
                  customClass: "warning",
                  duration: 1500,
               });
               return;
            }
            this.$refs.temp.validate(valid => {
               if (valid) {
                  this.tempLoading = true;
                  houseTypeApi.add(this.temp).then(res => {
                     let self = this;
                     setTimeout(function () {
                        self.tempLoading = false;
                     }, 2000);
                     if (res.code === 1) {
                        this.$notify({
                           title: "成功",
                           message: "添加成功",
                           type: "success",
                           customClass: "success",
                           duration: 1500
                        });
                        this.getList();
                        this.resetTemp();
                        this.dialogFormVisible = false;
                     } else {
                        this.$notify.error({
                           title: "失败",
                           message: res.msg,
                           customClass: "error",
                           duration: 1500
                        });
                     }
                  });
               } else {
                  this.$notify.warning({
                     title: "信息不完整",
                     message: "请完整填写信息",
                     customClass: "warning",
                     duration: 1500
                  });
               }
            });
         },

         //修改
         update() {
            this.temp.housesTypePicture = this.housesTypePicture;
            if (!this.temp.housesTypePicture) {
               this.$notify.warning({
                  title: "提示",
                  message: "请上传图片",
                  customClass: "warning",
                  duration: 1500,
               });
               return;
            }
            this.$refs.temp.validate(valid => {
               if (valid) {
                  this.tempLoading = true;
                  houseTypeApi.update(this.temp).then(res => {
                     let self = this;
                     setTimeout(function () {
                        self.tempLoading = false;
                     }, 2000);
                     if (res.code === 1) {
                        this.$notify({
                           title: "成功",
                           message: "修改成功",
                           type: "success",
                           customClass: "success",
                           duration: 1500
                        });
                        this.getList();
                        this.resetTemp();
                        this.dialogFormVisible = false;

                     } else {
                        this.$notify.error({
                           title: "失败",
                           message: res.msg,
                           customClass: "error",
                           duration: 1500
                        });
                     }
                  });
               } else {
                  this.$notify.warning({
                     title: "信息不完整",
                     message: "请完整填写信息",
                     customClass: "warning",
                     duration: 1500,
                  });
               }
            });
         },

         //列表
         getList() {
            houseTypeApi.pageList(this.listQuery).then(res => {
               this.list = res.data;
            });
         },

         routerBack() {
            this.$router.push({
               path: "building",
               query: {listQuery: this.$route.query.listQuery}
            });
         },
      },

      mounted() {
         this.$nextTick(() => {
            this.listHeight = this.$refs.main.offsetHeight;
            let self = this;
            window.addEventListener("resize", function () {
               self.listHeight = self.$refs.main.offsetHeight;
            });
         });
      },

      created() {
         this.getList();
      },
   }
   ;
</script>